<script setup lang="ts">
import { RangePicker } from "ant-design-vue"
import { RangePickerProps } from "ant-design-vue/es/date-picker"
import { Dayjs } from "dayjs"
import { useComputedBordered } from "@/composables/input-bordered"

export type Props = RangePickerProps

const model = defineModel<[string, string] | [Dayjs, Dayjs]>()

const props = withDefaults(defineProps<Props>(), {
  bordered: false,
  valueFormat: "YYYY-MM-DDTHH:mm:ss[Z]",
})

const { computedBordered } = useComputedBordered(props)

const slots = defineSlots<InstanceType<typeof RangePicker>["$slots"]>()
</script>

<template>
  <RangePicker
    class="pc-w-full pc-range-picker"
    v-model:value="model"
    :bordered="computedBordered"
    :valueFormat="props.valueFormat"
  >
    <template v-for="(_, key) in slots" :key="key" #[key]="params">
      <slot :key="key" :name="key" v-bind="params" />
    </template>
  </RangePicker>
</template>
<style>
.ant-picker-dropdown.ant-picker-dropdown-range
  .ant-picker-range-wrapper.ant-picker-date-range-wrapper {
  @apply !pc-min-w-0;
}
</style>
